import { Button, Space } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import jdCouponApi from '@/apis/jdCouponApi'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { download } from '@/utils'

export default defineComponent({
  name: 'SendRecordList',
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const tableRef = ref({} as ProTableRef)
    const exportLoading = ref(false)
    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          perfect: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '手机号',
              field: 'mobile',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  allowClear: true,
                  placeholder: '请输入'
                }
              }
            },
            {
              title: '发放原因',
              field: 'reason',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  allowClear: true,
                  placeholder: '请输入'
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '发放对象',
            field: 'memberName',
            minWidth: 150
          },
          {
            title: '手机号',
            minWidth: 150,
            field: 'mobile'
          },
          {
            title: '创建时间',
            field: 'createTime',
            minWidth: 200,
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '发放原因',
            minWidth: 150,
            field: 'reason'
          }
        ],

        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await jdCouponApi.getListCouponRecord({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                couponId: props.id,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //导出
    async function handleExport() {
      const { form } = tableRef.value.table.getProxyInfo()!
      try {
        exportLoading.value = true
        const res = await jdCouponApi.exportCouponRecord({
          couponId: props.id,
          ...form
        })
        download(res, '发放记录')
      } finally {
        exportLoading.value = false
      }
    }

    return {
      tableRef,
      tableConfig,
      exportLoading,

      handleExport
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            toolbarButtons: () => {
              return (
                <Space>
                  <Button
                    loading={this.exportLoading}
                    type="primary"
                    onClick={this.handleExport}
                  >
                    导出
                  </Button>
                </Space>
              )
            },
            provinceRow: ({ row }) => (
              <Space>
                <span>{`${row.provinceName ? row.provinceName : ''}${
                  row.cityName ? row.cityName : ''
                }`}</span>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
